<template>
	<section>
		<!--工具条-->
		<el-col :span="24" class="toolbar" style="padding-bottom: 0px;">
			<el-form :inline="true" :model="filters">
				<el-form-item>
					<el-input v-model="filters.title" placeholder="标题"></el-input>
				</el-form-item>
				<el-form-item>
					<el-button type="primary" v-on:click="getTemplates">查询</el-button>
				</el-form-item>
				<el-form-item>
					<el-button type="primary" @click="handleAdd">新增</el-button>
				</el-form-item>
			</el-form>
		</el-col>

		<!--列表-->
		<el-table :data="templates" highlight-current-row v-loading="listLoading" @selection-change="selsChange" style="width: 100%;">
			<el-table-column type="index" width="60">
			</el-table-column>
			<el-table-column prop="title" label="标题" width="200" >
			</el-table-column>
			<el-table-column prop="template_id" label="微信模版Id" width="330" sortable>
			</el-table-column>
			<el-table-column prop="content" label="内容" width="220" >
			</el-table-column>
			<el-table-column prop="created_time" label="创建时间" width="200" sortable>
			</el-table-column>

			<el-table-column label="操作" width="160">
				<template scope="scope">
					<el-button size="small" @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
					<el-button type="danger" size="small" @click="handleDel(scope.$index, scope.row)">删除</el-button>
				</template>
			</el-table-column>
		</el-table>

		<!--编辑界面-->
		<el-dialog title="编辑" v-model="editFormVisible" :close-on-click-modal="false">
			<el-form :model="editForm" label-width="100px" :rules="editFormRules" ref="editForm">
				<el-form-item label="标题" prop="title">
					<el-input v-model="editForm.title" auto-complete="off"></el-input>
				</el-form-item>
				<el-form-item label="微信模版Id" prop="template_id">
					<el-input v-model="editForm.template_id" auto-complete="off"></el-input>
				</el-form-item>
				<el-form-item label="内容" prop="nickname">
					<el-input v-model="editForm.content" auto-complete="off"></el-input>
				</el-form-item>
				<el-form-item label="参数" prop="data">
					<template v-for="(value, name, index) in editForm.data" style="border-radius: 2px" >
						<el-input style="width: 200px" v-model="editData.dataValue[index]" placeholder="请输入参数名"></el-input>
						<el-radio-group v-model="editData.dataParameter[index]" @change="changeParameters(index, value)">
							<el-radio label="1">自定义内容</el-radio>
							<el-radio label="0">指定字段</el-radio>
						</el-radio-group>
						<br>
						<el-input style="width: 80%; margin-top: 5px; margin-bottom: 5px" v-show="editData.dataParameter[index] == 1" v-model="editData.dataInputValue[index]" placeholder="请输入内容"></el-input>

						<el-select style="margin-top: 5px; margin-bottom: 5px"  placeholder="请选择" v-show="editData.dataParameter[index] == 0" v-model="editData.dataSelectValue[index]">
							<el-option
									v-for="item in selectOptions"
									:key="item.value"
									:label="item.label"
									:value="item.value">
							</el-option>
						</el-select>
						<i class="el-icon-delete pull-right" style="margin-right: 35px" @click="deleteData('edit', index)"></i>
						<br>
					</template>
					<br>
					<el-button @click="addData('edit')">添加</el-button>
				</el-form-item>
			</el-form>
			<div slot="footer" class="dialog-footer">
				<el-button @click.native="editFormVisible = false">取消</el-button>
				<el-button type="primary" @click.native="editSubmit" :loading="editLoading">提交</el-button>
			</div>
		</el-dialog>

		<!--新增界面-->
		<el-dialog title="新增" v-model="addFormVisible" :close-on-click-modal="false">
			<el-form :model="addForm" label-width="100px" :rules="addFormRules" ref="addForm">
				<el-form-item label="标题" prop="title">
					<el-input v-model="addForm.title" auto-complete="off"></el-input>
				</el-form-item>
				<el-form-item label="微信模版Id" prop="template_id">
					<el-input v-model="addForm.template_id" auto-complete="off"></el-input>
				</el-form-item>
				<el-form-item label="内容" prop="nickname">
					<el-input v-model="addForm.content" auto-complete="off"></el-input>
				</el-form-item>
				<el-form-item label="参数" prop="data">
					<template v-for="(value, name, index) in addForm.data" style="border-radius: 2px" >
						<el-input style="width: 200px" v-model="createData.dataValue[index]" placeholder="请输入参数名"></el-input>
						<el-radio-group v-model="createData.dataParameter[index]" @change="changeParameters(index, value)">
							<el-radio label="1">自定义内容</el-radio>
							<el-radio label="0">指定字段</el-radio>
						</el-radio-group>
						<br>
						<el-input style="width: 80%; margin-top: 5px; margin-bottom: 5px" v-show="createData.dataParameter[index] == 1" v-model="createData.dataInputValue[index]" placeholder="请输入内容"></el-input>

						<el-select style="margin-top: 5px; margin-bottom: 5px"  placeholder="请选择" v-show="createData.dataParameter[index] == 0" v-model="createData.dataSelectValue[index]">
							<el-option
									v-for="item in selectOptions"
									:key="item.value"
									:label="item.label"
									:value="item.value">
							</el-option>
						</el-select>
						<i class="el-icon-delete pull-right" style="margin-right: 35px" @click="deleteData('add', index)"></i>
						<br>
					</template>
					<br>
					<el-button @click="addData('add')">添加</el-button>
				</el-form-item>
			</el-form>
			<div slot="footer" class="dialog-footer">
				<el-button @click.native="addFormVisible = false">取消</el-button>
				<el-button type="primary" @click.native="addSubmit" :loading="addLoading">提交</el-button>
			</div>
		</el-dialog>
	</section>
</template>

<script>
	import util from '../../common/js/util'
	import { getTemplateListPage, removeTemplate, editTemplate, addTemplate } from '../../api/api';

	export default {
		data() {
			return {
				filters: {
					title: ''
				},
				templates: [],
				total: 0,
				page: 1,
				listLoading: false,
				sels: [],//列表选中列

				editData: {
					dataParameter: [],
					dataInputValue: [],
					dataSelectValue: [],
					dataValue: [],
				},
				editFormVisible: false,//编辑界面是否显示
				editLoading: false,
				editFormRules: {
					title: [
						{ required: true, message: '请输入标题', trigger: 'blur' }
					],
					template_id: [
						{ required: true, message: '请输入模版Id', trigger: 'blur' }
					]
				},
				//编辑界面数据
				editForm: {
					id: 0,
					title: '',
					template_id: -1,
					content: '',
					data: {},
				},

				addFormVisible: false,//新增界面是否显示
				addLoading: false,
				addFormRules: {
					title: [
						{ required: true, message: '请输入标题', trigger: 'blur' }
					],
					template_id: [
						{ required: true, message: '请输入模版Id', trigger: 'blur' }
					],
				},
				//新增界面数据
				addForm: {
					title: '',
					template_id: '',
					content: '',
					data: {},
				},
				createData: {
					dataParameter: [],
					dataInputValue: [],
					dataSelectValue: [],
					dataValue: [],
				},

				selectOptions: [{
					label: '用户名',
					value: 'user.username.select-wechat_open_id'
				},{
					label: '昵称',
					value: 'user.nickname.select-wechat_open_id'
				},{
					label: '最后登陆Ip',
					value: 'user.login_ip.select-wechat_open_id'
				},{
					label: '当前时间',
					value: 'current_time'
				}]

			}
		},
		methods: {
			handleCurrentChange(val) {
				this.page = val;
				this.getTemplates();
			},
			addData(type) {
				let form = this.editForm;
				let data = this.editData;

				if (type === 'add') {
					form = this.addForm;
					data = this.createData;
				}

				let index = Object.keys(form.data).length;
				if (form.data['zValue'+index] != undefined) {
					this.$set(form.data, 'zzValue'+index, 'input.');
					data.dataValue[index] = 'zzValue'+index;
				} else {
					this.$set(form.data, 'zValue'+index, 'input.');
					data.dataValue[index] = 'zValue'+index;
				}
				data.dataParameter[index] = '1';
				data.dataInputValue[index] = '';
				data.dataSelectValue[index] = '';
				console.log(form.data);
			},
			deleteData (type, index) {
				let form = this.editForm;
				let data = this.editData;
				if (type === 'add') {
					form = this.addForm;
					data = this.createData;
				}
				this.$delete(form.data, data.dataValue[index]);
				data.dataParameter.splice(index,1);
				data.dataInputValue.splice(index, 1);
				data.dataSelectValue.splice(index, 1);
				data.dataValue.splice(index, 1);
			},
			//获取模版列表
			getTemplates() {
				let para = {
					page: this.page,
					title: this.filters.title
				};
				this.listLoading = true;
				getTemplateListPage(para).then((res) => {
					console.log(res);
					this.total = res.data.total;
					for (let i in res.data.templates) {
						if (res.data.templates[i].data != null) {
							res.data.templates[i].data = JSON.parse(res.data.templates[i].data);
						}
					}
					this.templates = res.data.templates;
					this.listLoading = false;
				});
			},
			changeParameters: function (index, value) {
				console.log(index, value);
			},
			//删除
			handleDel: function (index, row) {
				this.$confirm('确认删除该记录吗?', '提示', {
					type: 'warning'
				}).then(() => {
					this.listLoading = true;
					//NProgress.start();
					removeTemplate(row.id).then((res) => {
						this.listLoading = false;
						//NProgress.done();
						this.$message({
							message: '删除成功',
							type: 'success'
						});
						this.getTemplates();
					});
				}).catch(() => {

				});
			},
			//显示编辑界面
			handleEdit: function (index, row) {
				this.editFormVisible = true;
				this.editData = {
					dataParameter: [],
					dataInputValue: [],
					dataSelectValue: [],
					dataValue: [],
				};
				this.editForm = Object.assign({}, row);
				let then = this;
				Object.keys(this.editForm.data).forEach(function (key, index) {
					let value = then.editForm.data[key].split(".");
					then.editData.dataValue[index] = key;
					if (value[0] === 'input') {
						then.editData.dataParameter[index] = '1';
						then.editData.dataInputValue[index] = then.editForm.data[key].slice(6);
						then.editData.dataSelectValue[index] = '';
					} else {
						then.editData.dataParameter[index] = '0';
						then.editData.dataSelectValue[index] = then.editForm.data[key];
					}
				});

			},
			//显示新增界面
			handleAdd: function () {
				this.addFormVisible = true;
				this.createData = {
					dataParameter: [],
					dataInputValue: [],
					dataSelectValue: [],
					dataValue: [],
				};
				this.addForm = {
					title: '',
					template_id: '',
					content: '',
					data: {},
				};
			},
			//编辑
			editSubmit: function () {
				this.$refs.editForm.validate((valid) => {
					if (valid) {
						this.$confirm('确认提交吗？', '提示', {}).then(() => {
							this.editLoading = true;
							let para = Object.assign({}, this.editForm);
							let data = this.buildData(this.editData);
							var editParams = {
								title: para.title,
								content: para.content,
								template_id: para.template_id,
								data: data,
							};

							editTemplate(para.id, editParams).then((res) => {
								this.editLoading = false;
								//NProgress.done();
								this.$message({
									message: '提交成功',
									type: 'success'
								});
								this.$refs['editForm'].resetFields();
								this.editFormVisible = false;
								this.getTemplates();
							});
						});
					}
				});
			},
			buildData: function (editData) {
				let data = {};
				for (let index in editData.dataParameter) {
					if (editData.dataParameter[index] == 1) {
						data[editData.dataValue[index]] = 'input.'+editData.dataInputValue[index];
					} else {
						data[editData.dataValue[index]] = editData.dataSelectValue[index];
					}
				}
				return data;
			},
			//新增
			addSubmit: function () {
				this.$refs.addForm.validate((valid) => {
					if (valid) {
						this.$confirm('确认提交吗？', '提示', {}).then(() => {
							this.addLoading = true;
							//NProgress.start();
							let para = Object.assign({}, this.addForm);
							let data = this.buildData(this.createData);
							var addParams = {
								title: para.title,
								content: para.content,
								template_id: para.template_id,
								data: data,
							};
							addTemplate(addParams).then((res) => {
								this.addLoading = false;
								//NProgress.done();
								this.$message({
									message: '提交成功',
									type: 'success'
								});
								this.$refs['addForm'].resetFields();
								this.addFormVisible = false;
								this.getTemplates();
							});
						});
					}
				});
			},
			selsChange: function (sels) {
				this.sels = sels;
			},
		},
		mounted() {
			this.getTemplates();
		}
	}

</script>

<style scoped>
	.user-list-avatar {
		width: 50px;
		height: 50px;
		border-radius:5px;
		margin-top: 5px
	}
	.avatar-uploader .el-upload {
		border: 1px dashed #d9d9d9;
		border-radius: 6px;
		cursor: pointer;
		position: relative;
		overflow: hidden;
	}
	.avatar-uploader .el-upload:hover {
		border-color: #409EFF;
	}
	.avatar-uploader-icon {
		font-size: 28px;
		color: #8c939d;
		width: 178px;
		height: 178px;
		line-height: 178px;
		text-align: center;
	}
	.avatar {
		width: 178px;
		height: 178px;
		display: block;
	}
</style>